<template>
  <view class="container">
    <!-- 分类导航栏 -->
    <view class="category-bar">
      <scroll-view scroll-x="true" class="category-scroll">
        <view 
          v-for="(status, index) in statusOptions" 
          :key="index" 
          class="status-item"
          :class="{ 'active': selectedStatus === status.value }"
          @click="filterByStatus(status.value)"
        >
          <text>{{ status.label }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 咨询记录列表 -->
    <view class="consult-list">
      <view 
        v-for="(item, index) in filteredConsults" 
        :key="item.id" 
        class="consult-item"
        @click="goToDetail(item)"
      >
        <view class="item-header">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
        </view>
        <text class="item-question">{{ item.question }}</text>
        <view class="item-meta">
          <text class="item-date">咨询时间: {{ item.date }}</text>
          <text class="item-lawyer" v-if="item.lawyer">回复律师: {{ item.lawyer }}</text>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="filteredConsults.length === 0" class="no-result">
      <text>暂无 {{ selectedStatus === 'all' ? '' : statusOptions.find(s => s.value === selectedStatus)?.label }} 的咨询记录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedStatus: 'all', // 当前选中的状态
      statusOptions: [
        { label: '全部', value: 'all' },
        { label: '待回复', value: 'pending' },
        { label: '已回复', value: 'replied' },
        { label: '已关闭', value: 'closed' },
      ],
      // 模拟咨询记录数据（实际项目应从后端获取）
      consults: [
        {
          id: 1,
          title: '关于合同违约金的咨询',
          question: '您好，我在合同中约定了违约金，但对方现在不承认，我该怎么办？',
          status: 'replied',
          date: '2025-04-15 10:30',
          lawyer: '张律师',
          answer: '根据《民法典》相关规定，合同双方应按约定履行义务。您可先协商，协商不成可起诉要求对方承担违约责任...'
        },
        {
          id: 2,
          title: '劳动纠纷咨询',
          question: '公司没有签订劳动合同，也没有缴纳社保，我应该如何维权？',
          status: 'pending',
          date: '2025-04-18 15:45',
          lawyer: null, // 待回复
          answer: null
        },
        {
          id: 3,
          title: '交通事故赔偿',
          question: '发生交通事故后，对方全责，但赔偿金额谈不拢，怎么处理？',
          status: 'replied',
          date: '2025-04-10 09:20',
          lawyer: '李律师',
          answer: '建议先行协商，若协商不成，可向交警部门申请调解，或直接向法院提起诉讼...'
        },
        {
          id: 4,
          title: '房产继承问题',
          question: '父母去世后，房产如何继承？',
          status: 'closed',
          date: '2025-04-05 14:10',
          lawyer: '王律师',
          answer: '房产继承需根据遗嘱或法定继承办理...'
        },
        {
          id: 5,
          title: '网络购物纠纷',
          question: '收到的商品与描述不符，商家不承认，怎么办？',
          status: 'replied',
          date: '2025-04-20 11:00',
          lawyer: '赵律师',
          answer: '您可以保留购买记录、聊天截图等证据，先与商家协商...'
        },
      ]
    };
  },
  computed: {
    filteredConsults() {
      if (this.selectedStatus === 'all') {
        return this.consults;
      }
      return this.consults.filter(consult => consult.status === this.selectedStatus);
    }
  },
  methods: {
    filterByStatus(status) {
      this.selectedStatus = status;
    },
    goToDetail(consult) {
      // 跳转到咨询详情页，传入咨询ID
      uni.navigateTo({
        url: `/pages/consult-detail/consult-detail?id=${consult.id}`
      });
    },
    getStatusClass(status) {
      switch (status) {
        case 'pending': return 'status-pending';
        case 'replied': return 'status-replied';
        case 'closed': return 'status-closed';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.category-bar {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.category-scroll {
  white-space: nowrap;
}

.status-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.status-item.active {
  background-color: #007aff;
  color: white;
}

.consult-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.consult-item {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.consult-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.item-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.status-pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-replied {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-closed {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.item-question {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>